<template>
  <div class="infoFlow">
    <section v-for="(item, index) in list" :key="index">
      <div class="list" v-if="item.d === 2" @click="toDetail(item.cu)">
        <h4>{{ item.t }}</h4>
        <img :src="item.img[0]">
        <p>{{ item.o }}</p>
      </div>
      <div class="list2" v-else-if="item.d === 4" @click="toDetail(item.cu)">
        <h4>{{ item.t }}</h4>
        <div class="d-flex">
           <img v-for="(item1, index1) in item.img" :key="index1" :src="item1" class="flex-1">
        </div>
        <p>{{ item.o }}</p>
      </div>
      <div class="list3 d-flex space-between" v-else @click="toDetail(item.cu)">
        <div class="flex-2 d-flex column space-between">
          <p>{{ item.t }}</p>
          <span>{{ item.o }}</span>
        </div>
        <img :src="item.img[0]" class="flex-1">
      </div>
    </section>
  </div>
</template>
<script>
import md5 from 'js-md5'

export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: []
    }
  },
  mounted () {
    wx.showLoading({
      title: '加载中'
    })
    this.getInfoDetail()
  },
  // onShow () {
  //   this.list = []
  //   this.getInfoDetail()
  // },
  // 上拉加载
  onReachBottom () {
    this.getInfoDetail()
  },
  // 下拉刷新
  onPullDownRefresh () {
    this.list = []
    // 显示导航栏loading
    wx.showNavigationBarLoading()
    // 调用接口加载数据
    this.getInfoDetail()
    // 隐藏导航栏loading
    wx.hideNavigationBarLoading()
    // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
    wx.stopPullDownRefresh()
  },
  methods: {
    // 获取信息流详情
    getInfoDetail () {
      const aid = '837d14e0b693f961'
      const pid = '1db990bec731c9d06951002b1c7b0811'
      const u = 'wx'
      const v = '1.0.0'
      const m = 'wx'
      const d = ''
      const t = Date.now()
      const s = md5(u + '&' + v + '&' + m + '&' + d + '&' + t + '&' + aid)
      wx.showLoading({
        title: '加载中' // 数据请求前loading
      })
      wx.request({
        url: 'https://nav.gionee.com/feed/list.do',
        method: 'GET',
        data: {
          aid,
          pid,
          u,
          v,
          m,
          d,
          t,
          s,
          cid: this.id,
          size: 10,
          na: 1
        },
        success: res => {
          this.list = this.list.concat(res.data.data)
          wx.hideLoading()
        }
      })
    },
    // 跳转到详情页
    toDetail (val) {
      wx.setStorageSync('url', val)
      wx.navigateTo({
        url: '/pages/web-view/main'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.infoFlow {
  padding: 0 10px;
  h4 {
    margin: 10px 0;
    font-size: 16px;
  }
  p {
    font-size: 14px;
    color: #ccc;
    margin-top: 10px;
  }
  .list {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      width: 100%;
      height: 200px;
    }
  }
  .list2 {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    img {
      height: 90px;
      &:nth-child(2) {
        margin: 0 5px;
      }
    }
  }
  .list3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 0;
    p {
      margin: 0;
      font-size: 16px;
      color: #000;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    span {
      font-size: 12px;
      color: #ccc;
    }
    img {
      height: 90px;
    }
  }
}
</style>

